<template>
	<view>
		<topDropdown :isSxShow="true" :isPaiXu="true" :dropdown1="dropdown1" :options1="options1" :optionsSx="sxList"
			:optionsPx="optionsPx" :isDuoXuan="true" :isKhShow="true" searchLabel1="跟进内容" searchPh1="请输入跟进内容关键字"
			@searchBoxEmitFun="searchBoxEmitFun" @dropDownFun1="dropDownFun1" @optionSxFun="optionSxFun"
			@optionPxFun="optionPxFun"></topDropdown>
		<dataNull v-if="dataList.length == 0" src="/static/img/chahua/gjNull.png" title="暂无相关根进记录" title1="请添加或者更换搜索添加">
		</dataNull>
		<view v-else>
			<scroll-view scroll-y="true" :style="{height: scrollHeight}" @scrolltolower="selectDataFun"
				refresher-enabled :refresher-threshold="200" :refresher-triggered="triggered"
				refresher-background="gray" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
				<view v-for="(item, index) in dataList" :key="index">
					<traceCard :item="item" :index="index"></traceCard>
				</view>
				<getMore :isMore="isMore"></getMore>
			</scroll-view>
		</view>
		<addBtn url="./add"></addBtn>
	</view>
</template>

<script>
	let that = '';
	import {
		apiTrace
	} from '@/api/crm.js'

	import {
		gjDropDownData,
		gjDropDownData1,
		gjSxDropDownData,
		gjDatePxData
	} from '@/utils/dropdown.js'
	import {
		getDayByNumFun,
		formatDate
	} from '@/utils/date.js'
	import dataNull from '@/components/dataNull/dataNull.vue'
	import addBtn from '@/components/addBtn/addBtn.vue'
	import traceCard from '@/components/card/traceCard.vue'
	import getMore from '@/components/getMore/getMore.vue'
	import topDropdown from '@/components/topDropdown/topDropdown.vue'
	export default {
		components: {
			dataNull,
			addBtn,
			getMore,
			traceCard,
			topDropdown
		},
		data() {
			return {
				dropdown1: '全部',
				options1: [],
				optionsPx: gjDatePxData,
				sxList: gjSxDropDownData,
				triggered: false,
				dataList: [],
				isMore: true,
				pageNum: 1,
				scrollHeight: '667px',
				sortObj: {
					updatetime: 'desc'
				},
				optionsReq: {}, // 第一个下拉框请求参数
				sortReq: {}, //第二个下拉排序
				dateReq: [], // 日期相关请求参数
				sxReq: {}, // 筛选想请求参数
				matchObj: {},
				clientIdArr: [],
				searchValue: '',
				tabNoEqualArr: [], //标签页不等于数据
				sys_user_id: uni.$userInfo.id
			}
		},
		onLoad(e) {
			that = this;
			let obj = {};

			//判断当前用户是否为管理者
			if (uni.$userInfo.isDepManager) {
				that.options1 = gjDropDownData;
				that.depId = uni.$userInfo.depManager_Id;
			} else {
				that.options1 = gjDropDownData;
				obj.fuZeRenId = uni.$userInfo._id;
			}

			if (e.customer_id) {
				that.clientIdArr = [e.customer_id]
			}

			// that.matchObj = obj;
			// that.optionsReq = JSON.stringify(obj);

			//设置滚动高度
			uni.getSystemInfo({
				success(res) {
					that.scrollHeight = res.windowHeight - 40 + 'px';
				}
			})

			that.selectDataFun()
			
			uni.$on('deleteCardFun', that.deleteCardFun);
			uni.$on('updatedataListByIndex', that.updatedataListByIndex)
			uni.$on('addGjItemInListFun', that.addGjItemInListFun)
		},
		onBackPress() {
			uni.$off('deleteCardFun', that.deleteCardFun);
			uni.$off('updatedataListByIndex', that.updatedataListByIndex)
			uni.$off('addGjItemInListFun', that.addGjItemInListFun);
		},
		methods: {
			// 查询跟进记录
			selectDataFun: function() {
				if (!that.isMore) {
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				let matchObj = {
					openstatus: 1,
					sys_user_id: uni.$userInfo.id,
					keywords:that.searchValue,
					customer_id:that.clientIdArr.join(),//客户id
				}

				let reqObj = {
					matchObj: Object.assign(matchObj, that.optionsReq, that.sxReq), //三个选择数据合并
					sortObj: that.sortReq,
					pageNum: that.pageNum
				}

				let reqData = {
					action: 'get_list',
					params: reqObj
				}
				apiTrace(reqData)
					.then(res => {
						this.triggered = false;
						let data = res.data.data;
						console.log(data)
						if (that.pageNum == 1) {
							that.dataList = [];
						}
						if (that.pageNum < res.data.last_page) {
							that.pageNum += 1;
							that.isMore = true;
						} else {
							that.isMore = false;
						}
						that.dataList = that.dataList.concat(data);
						setTimeout(() => {
							//延时关闭  加载中的 loading框
							uni.hideLoading()
						}, 888)
					})
			},
			// 下拉框回调函数
			dropDownFun1: function(e) {
				let optionsReq = {};
				let userInfo = uni.$userInfo;
				that.listtype = undefined;
				if (e.label == '全部客户') {
					optionsReq.listtype = 'selfson';
				} else if (e.label == '我的客户') {
					optionsReq.listtype = 'self';
				} else if (e.label == '下属客户') {
					optionsReq.listtype = 'son';
				} else if (e.label == '共享客户') {
					optionsReq.listtype = 'share';
				} else if (e.label == '我创建的') {
					optionsReq.listtype = 'self';
				}

				that.optionsReq = optionsReq;

				console.log('下拉回调的参数')
				console.log(optionsReq)

				that.afreshGetDataFun();
			},
			// 多条件筛选框回调函数
			optionSxFun: function(e) {
				let arr = e.arr;
				that.clientIdArr = e.selectKhList;//选择客户的id
				let matchReq = [];
				let dateReq = [];
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].current !== '' && !arr[i].isDate) {
						matchReq.push({
							field: arr[i].field,
							value: arr[i].arr[arr[i].current]
						})
					} else if (arr[i].current !== '' && arr[i].isDate) {
						dateReq.push({
							field: arr[i].field,
							value: formatDate(arr[i].sTime) + '-' + formatDate(arr[i].eTime)
						})
					}
				}
				let reqObj = {};
				// 动态生成请求对象
				for (var i = 0; i < matchReq.length; i++) {
					reqObj[matchReq[i].field] = matchReq[i].value
				}
				//时间参数处理
				for (var i = 0; i < dateReq.length; i++) {
					reqObj[dateReq[i].field] = dateReq[i].value
				}
				that.sxReq = reqObj;

				console.log('筛选回调的参数')
				console.log(that.clientIdArr)

				that.afreshGetDataFun();
			},
			// 排序筛选框回调函数
			optionPxFun: function(arr) {
				let sortReq = {
					orderField: ''
				}
				let direaction = '';
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].current !== '') {
						sortReq = {}
						if (arr[i].field == 'create_time') {
							sortReq.orderDirection = arr[i].current == 1 ? 'asc' : 'desc'
						}
						if (arr[i].field == 'update_time') {
							sortReq.orderDirection = arr[i].current == 1 ? 'asc' : 'desc'
						}
						if (arr[i].field == 'link_time') {
							sortReq.orderDirection = arr[i].current == 1 ? 'asc' : 'desc'
						}
						sortReq.orderField = arr[i].field;
						break;
					}
				}
				that.sortReq = sortReq;

				console.log('排序回调的参数')

				console.log(sortReq)

				that.afreshGetDataFun();
			},
			// 搜索框回调方法
			searchBoxEmitFun: function(e) {
				that.searchValue = e.searchValue1;
				that.afreshGetDataFun()
			},
			// 下拉刷新
			onRefresh: function() {
				if (that.triggered) return
				that.triggered = true;
				that.afreshGetDataFun();
			},
			onRestore: function(e) {
				that.triggered = false; // 需要重置
			},
			// 重新获取数据
			afreshGetDataFun: function() {
				that.pageNum = 1;
				that.isMore = true;
				that.selectDataFun();
			},
			//删除数据
			deleteCardFun: function(e) {
				let arr = that.dataList;
				arr.splice(e.index, 1);
				that.dataList = arr;
			},
			// add页面新增数据
			addGjItemInListFun: function(e) {
				that.afreshGetDataFun()
			},
			// 通过下标更新list数据
			updatedataListByIndex: function(e) {
				that.$set(that.dataList, parseInt(e.index), e.obj)
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}

	.card {
		width: 686rpx;
		margin: 32rpx;
		background-color: #FFFFFF;
		padding: 26rpx;
		border-radius: 26rpx;
		box-sizing: border-box;
		box-shadow: #dddddd 0px 0px 32rpx;
	}

	.bottomRow {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #dddddd;
		padding-top: 16rpx;
		margin-top: 16rpx;
	}

	.khName {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.lrView {
		display: flex;
		font-size: 16px;
	}

	.lrView>view:first-child {
		width: 176rpx;
		color: #ADADAD;
	}

	.lrView>view:last-child {
		width: 466rpx;
		color: #000000;
	}
</style>
